<template>
  <div class="projectMap">
    <div id="map-container"></div>
  </div>
</template>
<script>
import { ProjectListApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      map: '', //地图实例
      points: [],
      compId: '',
      compBusinessType: ''
    }
  },
  props: {
    projectList: {
      type: Array
    }
  },
  methods: {
    // 渲染百度地图
    renderMap () {
      return this.$nextTick(() => {
        var that = this;
        this.map = new BMap.Map("map-container", { enableMapClick: false })  //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
        var point = new BMap.Point(120.077642, 30.297776);
        this.map.centerAndZoom(point, 12)
        this.map.enableScrollWheelZoom()

        var markers = [];
        this.points.forEach(v => {
          // 创建新的坐标点
          const marker = new BMap.Marker(new BMap.Point(v['lon'], v['lat']), {
            icon: '',
          })

          markers.push(marker)

          this.map.addOverlay(marker);              // 将标注添加到地图中
          let sContent = `<div><h3 style='margin-top:10px'>${v['project_name']}</h3>
        <p style='font-size:13px;'>
        项目地址：<span style="color:#ff8355;">${v['province']}${v['city']}${v['area']}${v['address']}</span> 
        </p>
        <p style='font-size:13px;'>
        所属单位：<span style="color:#ff8355">${v['company_name']}</span> 
        </p></div>`;
          let infoWindow = new BMap.InfoWindow(sContent);
          marker.addEventListener('click', function () {//点击事件
            let that = this;
            window.open('/operaProject?status=detail&project_id=' + v['project_id'], '_self');//在当前页面打开
          });
          marker.addEventListener('mouseover', function (e) {//鼠标移入事件
            this.openInfoWindow(infoWindow);
          });
        })
        var myStyles = [{
          url: require('../../../assets/img/word.png'),
          size: new BMap.Size(35, 30),
          // opt_anchor: [10, 0],
          textColor: '#fff',
          opt_textSize: 12
        }]
        // 添加点聚合
        var markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: markers });
        markerClusterer.setStyles(myStyles);

        if (this.compBusinessType == '1') {
          var point = new BMap.Point(120.077642, 30.297776);
          this.map.centerAndZoom(point, 6)
          //如果是监管,定位到省级,添加点聚合
          // var markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: markers });
          // markerClusterer.setStyles(myStyles);
        } else {
          //其他情况直接定位到市级
        }


      })

    },
    getPoints (list) {
      if (list.length > 0) {
        list.map((item, ind, arr) => {
          if (item.address == null) {
            item.address = ''
          }
        })
      };
      return list;
    },
    getProjectManageList () {//百度地图的项目相关信息 
      return ProjectListApi.getProjectManageList({
        data: {
          conditions: [],
          company_id: this.compId,//单位id
          module_id: '1', //项目地图为1
          province_no: '',
          city_no: '',
          area_no: '',
          is_page: 1,
          page: 1,
          page_size: 100000,
        }
      }).then(res => {
        if (res.data) {
          let list = res.data.list || [];
          this.points = this.getPoints(list);
          console.log('points=', this.points, '百度地图 validate code')
        }
      })
    },
  },
  watch: {

  },
  async created () {
    let userInfoLocal = window.localStorage.getItem("userInfo") || "{}";
    let userInfo = JSON.parse(userInfoLocal);
    this.compId = userInfo.comp_id || '';//单位id
    // this.compBusinessType = userInfo.company_business_type || 0;//1:监管；0:不是监管
    this.compBusinessType = 1
    await this.getProjectManageList();//获取地图
    await this.renderMap()
  },
  mounted () {


  }

}
</script>
<style scoped lang='scss'>
.projectMap {
  padding: 10px;
  #map-container {
    position: absolute;
    //地图的宽高减去padding和title的高
    width: calc(100% - 20px);
    height: calc(100% - 74px);
    z-index: 10;
  }
  .map-box {
    margin-bottom: 15px;
  }
  .map-dialog {
    z-index: 3000 !important;
  }
  .autoAddressClass {
    z-index: 3000;
    li {
      i.el-icon-search {
        margin-top: 11px;
      }
      .mgr10 {
        margin-right: 10px;
      }
      .title {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .address {
        line-height: 1;
        font-size: 12px;
        color: #b4b4b4;
        margin-bottom: 5px;
      }
    }
  }
  #SGbaidumap {
    width: 100%;
    height: 100%;
  }
  >>> .anchorBL,
  >>> .anchorTR,
  >>> .BMap_zlHolder,
  >>> [id^="PanoramaFlashWraperTANGRAM"] {
    display: none;
    visibility: hidden;
  }
}
</style>

